<template>
  <div class="header">
    <ul>
      <!-- 一级标题  firstTitle点击事件-->
      <li
        v-for="(item,index) in catalogList"
        :key="index"
        class="catalog-title"
        @click.stop="firstTitle(index)">
        <div class="catalog-title-conetent">
          <span
            :class="{'catalog-item-icon-active':firstCurrentIndex===index}"
            class="catalog-item-icon"/>
          <span class="catalog-item-title">{{ item.ClassName }}</span>
        </div>
        <span
          v-show="firstCurrentIndex===index&&lineTag"
          class="line"/>
        <!-- 二级标题  doThis点击事件-->
        <ul
          v-show="firstCurrentIndex===index">
          <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
          <li
            v-for="(item2,index2) in item.Product"
            :key="index2"
            @click.stop="doThis(index2)">
            <div
              class="item-title-conetent"
              style="margin-top:0.5rem;">
              <span
                :class="{'item-item-icon-active':firstCurrentIndex===index&&index2===secondCurrentIndex}"
                class="item-item-icon"/>
              <span class="item-item-title">{{ item2.ProductName }}</span>
            </div>
            <ul
              v-show="firstCurrentIndex===index&&index2===secondCurrentIndex">
              <li
                v-for="( item3,index3 ) in item2.CourseList"
                :key="index3">
                <span class="line"/>
                <div class="list-title-content">
                  <div>
                    <span style="display:inline-block;width: .8rem;height: .8rem;border-radius: 100%;margin-left: .8rem;background: #ff6a4a;"/>
                    <span class="list-item-title">{{ item3.courseName }}</span>
                  </div>
                  <!-- <p @click.stop="goStudy(item3)" v-if="item3.IsBuy">去学习</p>
                  <p on="tap:user.login" v-else style="color:#ff6a4c;">立即购买</p> -->
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
import base from '../../common/base.js'
export default {
  data () {
    return {
      catalogList: [],
      firstCurrentIndex: 0,
      secondCurrentIndex: 0,
      lineTag: true
    }
  },
  mounted () {
    let _this = this
    fetch(base.api.getGoodsCatalog, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: base.getQueryString('goodsId')
      })
    })
      .then(function (response) {
        // 获得后台实际返回的内容
        response.json().then(function (data) {
          if (data.data) {
            _this.catalogList = data.Data
          }
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  },
  methods: {
    firstTitle (index) {
      this.firstCurrentIndex = index
      this.secondCurrentIndex = 0
      if (index === 0) {
        this.lineTag = true
      } else {
        this.lineTag = false
      }
    },
    doThis (index) {
      this.secondCurrentIndex = index
      if (index === 0) {
        this.lineTag = true
      } else {
        this.lineTag = false
      }
    },
    goStudy (item) {
      console.log(item)
    }
  }
}
</script>
<style lang='less' scoped>
.catalog-title-conetent {
  color: #333;
}
.item-title-conetent {
  color: #233333;
}
.list-item-title {
  color: #666;
}
.catalog-title-conetent,
.item-title-conetent {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  .catalog-item-title {
    font-size: 1.6rem;
    padding-left: 1rem;
  }
  .item-item-title {
    font-size: 1.4rem;
    padding-left: 1rem;
  }
}
.catalog-item-icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 50%;
  display: inline-block;
  width: 2.2rem;
  background-image: url("");
  height: 2.2rem;
}
.catalog-item-icon-active {
  background-image: url("");
}
.header li {
  list-style: none;
}
.header {
  > ul {
    width: 100%;
    > li {
      width: 100%;
      cursor: pointer;
      > ul {
        width: 100%;
        li:last-of-type {
          padding-bottom: 2rem;
        }
      }
    }
    .catalog-title::before {
      width: 2rem;
      height: 2rem;
    }
  }
  .line {
    margin-left: 1.1rem;
    display: block;
    height: 4rem;
    background: url("");
    background-repeat: no-repeat;
    width: 2rem;
  }
}
.list-title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  > p {
    float: right;
    font-size: 1.1rem;
    color: #999;
  }
}
.item-item-icon {
  margin-left: 0.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 50%;
  display: inline-block;
  width: 1.6rem;
  background-image: url("");
  height: 1.6rem;
}
.item-item-icon-active {
  background-image: url("");
}
.list-item-title {
  font-size: 1.4rem;
  padding-left: 1rem;
}
a,
img,
button,
input,
textarea,
div {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
</style>
